<template>
        <div class="note">
            <div class="mark"></div>
            <div class="note_head">
                <h5 class="title">{{item.title}}</h5>
                <ul class="tools">
                    <li class="edit" @click="editNote(item)">
                        <!-- <el-button type="text"></el-button> -->
                    </li>
                    <li class="delete"  @click="delNote(item)">
                        <!-- <el-button type="text"></el-button> -->
                    </li>
                </ul>
            </div>
            <h6 class="note_info">
                <!-- <span class="timeStamp"> {{item.createdAt.substring(0,19).replace("T"," ")}} </span> -->
                <span class="timeStamp"> {{item._updatedAt}} </span>
                <span class="category">分类: {{item.tagName}}</span>
            </h6>
            <div class="note_content">
                <div class="text" v-if="item.type == 1">
                    {{item.content}}
                </div>
                <div class="img" v-if="item.type == 2">
                    <img :src="item.content" alt=""  crossOrigin="Anonymous" >
                </div>
            </div>
        </div>
</template>
<script>
export default {
	name:"NoteBox",
    props:{
        item:{
            type:Object,
            default(){
                return {
                }
            }
        }
    },
    data(){
        return {
        }
    },
    methods:{
        editNote(item){
            this.$emit("editNote",item);
        },
        delNote(item) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.delNote({
                        id: item._id
                    }).then(res => {
						//console.log(res)
						if(res.ok == 1){
							this.$emit("delNote")
						} 
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
    }

}
</script>
<style lang="scss" scoped>
            .note {
                height: 276px;
                position: relative;
                border: 1px solid #bdbdbd;
                border-radius: 5px;
                padding: 10px;
                background-color: #fff;
                transition: all .15s ease-in-out;

                .mark {
                    display: none;
                    position: absolute;
                    width: 24px;
                    height: 24px;
                    top: -8px;
                    left: -8px;
                    border-radius: 50%;
                    background: #4dabf5 url(../assets/icons/icon-done.svg) no-repeat 3px 3px;
                    background-size: 18px 18px;
                    transition: all .2s ease-in-out;
                    cursor: pointer;
                }

                .mark:hover {
                    transform: scale(1.2);
                }

                .note_head {
                    width: 100%;
                    height: 40px;
                    line-height: 40px;

                    .title {
                        height: 24px;
                        line-height: 24px;
                        padding-bottom: 6px;
                        font-size: 14px;
                        float: left;
                        border-bottom: 1px solid #bdbdbd;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        max-width: calc(100% - 60px);
                    }

                    .tools {
                        float: right;
                        margin-top: 6px;

                        li {
                            width: 20px;
                            height: 20px;
                            float: left;
                            margin-left: 10px;
                            opacity: .5;
                            transition: opacity .2s ease-in-out;
                        }

                        .edit {
                            background: url(../assets/icons/icon-edit.png) no-repeat 0 0;
                        }

                        .delete {
                            background: url(../assets/icons/icon-delete.png) no-repeat 0 0;
                        }

                        li:hover {
                            opacity: 1;
                            cursor: pointer;
                        }
                    }
                }

                .note_info {
                    font-size: 12px;
                    margin-bottom: 12px;
                    color: #757575;
                    font-weight: 300;

                    .category {
                        float: right;
                    }
                }

                .note_content {
                    width: 264px;
                    height: 206px;
                    overflow-y: scroll;
                    border: 1px solid #f8f8f8;
                    text-overflow: ellipsis;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                }
            }

            .note:hover {
                box-shadow: 0 0 6px 0 #757575;

                .mark {
                    display: block;
                }
            }
</style>